<template>
  <div>
    <!-- 目录导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      <el-breadcrumb-item>富文本编辑器(vue-quill-editor)</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <quill-editor v-model="content" 
        ref="quillEditorRef" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
      </quill-editor>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      
      // 富文本编辑器默认内容
      content: '',
      //  富文本编辑器配置
      editorOption: {
        placeholder: '请输入内容...',
      }
    }
  },
  methods: {
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  },
  computed: {
    editor() {
      return this.$refs.quillEditorRef.quill
    }
  },
}
</script>

<style lang="less" scoped>
.el-card {
  height: 340px;
}
.quill-editor{
  height: 234px;
}
</style>